@timeline-flag-width-radius       : 11px;
@timeline-flag-background         : #bbb;
@timeline-flag-inner-width-radius : 4px;
@timeline-line-width              : 4px;
@timeline-line-background         : @timeline-flag-background;
@timeline-line-height             : 40px;
@timeline-name-width              : 80px;
@timeline-name-fontSize           : 16px;
@timeline-value-fontSize          : 16px;

.timeline {
  margin: 20px 0;
}

.timeline-wrap {
  padding: 0;
  margin: 0;

  .clearfix();
}

.timeline-item {
  list-style: none;
  position: relative;
  padding-bottom: @timeline-line-height;

  .clearfix();
}

.timeline-flag {
  float: left;
  width: @timeline-flag-width-radius * 2;
  height: @timeline-flag-width-radius * 2;
  border-radius: @timeline-flag-width-radius;
  background: @timeline-flag-background;
  position: relative;

  &:after {
    content: '';
    position: absolute;
    width: @timeline-flag-inner-width-radius * 2;
    height: @timeline-flag-inner-width-radius * 2;
    border-radius: @timeline-flag-inner-width-radius;
    background: #fff;
    top: @timeline-flag-width-radius - @timeline-flag-inner-width-radius;
    left: @timeline-flag-width-radius - @timeline-flag-inner-width-radius;
  }
}

.timeline-line {
  position: absolute;
  top: @timeline-flag-width-radius * 2 - 1px;
  bottom: -1px;
  left: @timeline-flag-width-radius - @timeline-line-width / 2;
  background: @timeline-line-background;
  width: @timeline-line-width;
}

.timeline-item:last-child .timeline-line {
  display: none; 
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-content {
  margin-left: @timeline-flag-width-radius * 2 + 20px;
  margin-top: ceil(((@timeline-flag-width-radius * 2) - (@timeline-value-fontSize * @line-height-base)) / 2);

  .clearfix();
}

.timeline-name {
  float: left;
  width: @timeline-name-width;
  font-size: @timeline-name-fontSize;

  .text-overflow();
}

.timeline-value {
  margin-left: @timeline-name-width + 10px;
  font-size: @timeline-value-fontSize;
}

// active
.timeline-item.active {
  .timeline-line {
    background: @brand-primary;
  }
  .timeline-flag {
    background: @brand-primary; 
  }
}

// success
.timeline-item.success {
  .timeline-line {
    background: @brand-success;
  }
  .timeline-flag {
    background: @brand-success; 
  }
}

// fail
.timeline-item.fail {
  .timeline-line {
    background: @brand-danger;
  }
  .timeline-flag {
    background: @brand-danger; 
  }
}